<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="6" :xs="24">
        <div>
          <div>
            <el-row>
              <el-card class="infoCard">
                <h2 class="textcenter">Lpa/诺唯赞/QD-S1200</h2>
                <h2 class="textcenter">Lpa/诺唯赞/QD-S2000</h2>
                <h2 class="textcenter">钾/诺唯赞/QD-S2000</h2>
                <h2 class="textcenter">ALB/诺唯赞/QD-S1200</h2>
                <div class="textcenter">
                  <el-button type="primary">按仪器排</el-button>
                  <el-button type="warning">按项目排</el-button>
                </div>
              </el-card>
            </el-row>
          </div>
        </div>
      </el-col>
      <el-col :span="18" :xs="24">
        <el-card>
          <el-form ref="form" class="form">
            <el-row>
              <el-col :span="10">
                <el-form-item label="项目名称:" label-width="20%">钾</el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="项目单位:" label-width="20%">mmol/L</el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="6">
                <el-form-item label="仪器品牌:" label-width="20%">诺唯赞</el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="仪器型号:" label-width="20%">QD-S2000</el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="仪器编码:" label-width="20%">NJYKD-J-000001</el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="方法学:" label-width="20%">离子选择性电极（间接法）</el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="6">
                <el-form-item label="试剂品牌:" label-width="20%">诺唯赞</el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="质控品名称:" label-width="20%">生化与激素非定值质控品</el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="质控品批号:" label-width="20%">521-2,521-3</el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="10">
                <el-form-item label="时间范围:" label-width="20%">202101-202106</el-form-item>
              </el-col>
              <el-col :span="6">
                <el-date-picker v-model="value1" type="date" placeholder="选择时间段">
                </el-date-picker>
              </el-col>
              <el-col :span="8">
                <el-button type="primary">年度</el-button>
                <el-button type="warning">半年度</el-button>
                <el-button type="warning" @click.native="handleOpenHistory">查看历史统计报告</el-button>
              </el-col>
            </el-row>
          </el-form>
          <el-divider/>
          <el-table
            :data="tableData1"
            style="width: 100%;"
          >
            <el-table-column label="浓度水平" align="left" prop="standard" :show-overflow-tooltip="true" />
            <el-table-column label="具体内容" align="left" prop="content" :show-overflow-tooltip="true" />
            <el-table-column label="1月" align="left" prop="one" />
            <el-table-column label="2月" align="left" prop="two" />
            <el-table-column label="3月" align="left" prop="three" />
            <el-table-column label="4月" align="left" prop="four" />
            <el-table-column label="5月" align="left" prop="five" />
            <el-table-column label="6月" align="left" prop="six" />
            <el-table-column label="月份数" align="left" prop="month" />
            <el-table-column label="总累积值" align="left" prop="cumulant" />
          </el-table>

          <echarts name='top1' />
          <el-divider/>
          <el-table
            :data="tableData2"
            style="width: 100%;"
          >
            <el-table-column label="浓度水平" align="left" prop="standard" :show-overflow-tooltip="true" />
            <el-table-column label="具体内容" align="left" prop="content" :show-overflow-tooltip="true" />
            <el-table-column label="1月" align="left" prop="one" />
            <el-table-column label="2月" align="left" prop="two" />
            <el-table-column label="3月" align="left" prop="three" />
            <el-table-column label="4月" align="left" prop="four" />
            <el-table-column label="5月" align="left" prop="five" />
            <el-table-column label="6月" align="left" prop="six" />
            <el-table-column label="月份数" align="left" prop="month" />
            <el-table-column label="总累积值" align="left" prop="cumulant" />
          </el-table>

          <echarts name='top2' />
          <el-divider/>
          <el-table
            :data="tableData3"
            style="width: 100%;"
          >
            <el-table-column label="浓度水平" align="left" prop="standard" :show-overflow-tooltip="true" />
            <el-table-column label="具体内容" align="left" prop="content" :show-overflow-tooltip="true" />
            <el-table-column label="月份数" align="left" prop="monthNum" />
            <el-table-column label="总累积值" align="left" prop="cumulant" />
            <el-table-column label="合成总CV" align="left" prop="allCV" />
          </el-table>
          <h2>每月失控情况统计</h2>
          <el-table
            :data="tableData4"
            style="width: 100%;"
          >
            <el-table-column label="具体内容" align="left" prop="content" :show-overflow-tooltip="true" />
            <el-table-column label="1月" align="left" prop="one" />
            <el-table-column label="2月" align="left" prop="two" />
            <el-table-column label="3月" align="left" prop="three" />
            <el-table-column label="4月" align="left" prop="four" />
            <el-table-column label="5月" align="left" prop="five" />
            <el-table-column label="6月" align="left" prop="six" />
            <el-table-column label="具体内容" align="left" prop="content" />
            <el-table-column label="统计结果" align="left" prop="result" />
          </el-table>
          <h2>偏倚Bias <el-button type="primary">新增样本</el-button></h2>
          <el-table
            :data="tableData5"
            style="width: 100%;"
          >
            <el-table-column label="项目" align="left" prop="project" :show-overflow-tooltip="true" />
            <el-table-column label="溯源对象" align="left" prop="objInfo" :show-overflow-tooltip="true" />
            <el-table-column label="样本1" align="left" prop="sample1" />
            <el-table-column label="样本2" align="left" prop="sample2" />
            <el-table-column label="样本个数" align="left" prop="sampleNum" />
            <el-table-column label="合成偏倚" align="left" prop="offset" />
          </el-table>
          <h2>总误差TE</h2>
            <div>
              <div>
                <span>实验室实际性能</span>
                <el-table
                  :data="tableData6"
                  style="width: 100%;"
                >
                  <el-table-column label="CV" align="left" prop="CV" :show-overflow-tooltip="true" />
                  <el-table-column label="Bias" align="left" prop="Bias" :show-overflow-tooltip="true" />
                  <el-table-column label="TE" align="left" prop="TE" />
                </el-table>
              </div>
              <div>
                <span>实验室设定的质量目标</span>
                <el-table
                  :data="tableData7"
                  style="width: 100%;"
                >
                  <el-table-column label="设定质量目标" align="left" prop="target" :show-overflow-tooltip="true" />
                  <el-table-column label="允许TEa" align="left" prop="TEa" :show-overflow-tooltip="true" />
                  <el-table-column label="设定标准" align="left" prop="standard1" />
                  <el-table-column label="允许CV" align="left" prop="CV" />
                  <el-table-column label="设定标准" align="left" prop="standard2" />
                  <el-table-column label="允许Bias" align="left" prop="Bias" />
                </el-table>
              </div>
            </div>
          <h2>结果评价</h2>
          <el-table
            :data="tableData8"
            style="width: 100%;"
          >
            <el-table-column label="Sigma" align="left" prop="Sigma" :show-overflow-tooltip="true" />
            <el-table-column label="CV" align="left" prop="CV" :show-overflow-tooltip="true" />
            <el-table-column label="Bias" align="left" prop="Bias" />
            <el-table-column label="TE" align="left" prop="TE" />
          </el-table>

          <h2><el-button type="primary">生成报告</el-button></h2>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>

import echarts from "../components/echarts";

export default {
  name: "detail",
  components: {
    echarts
  },
  props: {
    isVisible: {
      type: Boolean,
      default: false
    },
    checkId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      value1: '',
      user: {},
      activeTab: "putInList",
      deviceInfo: {},
      tableData1: [],
      tableData2: [],
      tableData3: [],
      tableData4: [],
      tableData5: [],
      tableData6: [],
      tableData7: [],
      tableData8: []
    };
  },
  created() {
    this.getTableData1()
    this.getTableData2()
    this.getTableData3()
    this.getTableData4()
    this.getTableData5()
    this.getTableData6()
    this.getTableDate7()
    this.getTableDate8()
  },
  methods: {
    getTableData1() {
      let row = {
        standard:'水平1',
        content:'均值Mean',
        one:'3.68',
        two: '3.71',
        three: '3.71',
        four: '3.73',
        five: '3.73',
        six: '3.72',
        month: '6',
        cumulant: 3.71
      }
      this.tableData1.push(row)
    },
    getTableData2() {
      let row = {
        standard:'水平1',
        content:'均值Mean',
        one:'3.68',
        two: '3.71',
        three: '3.71',
        four: '3.73',
        five: '3.73',
        six: '3.72',
        month: '6',
        cumulant: 3.71
      }
      this.tableData2.push(row)
    },
    getTableData3() {
      let row = {
        standard: '水平1',
        content: '精密度CV',
        monthNum: 6,
        cumulant: '1.58%',
        allCV: '1.45%'
      }
      let row2 = {
        standard: '水平2',
        content: '精密度CV',
        monthNum: 6,
        cumulant: '1.58%',
        allCV: '1.45%'
      }
      this.tableData3.push(row)
      this.tableData3.push(row2)
    },
    getTableData4() {
      let row = {
        content: '质控点数',
        result: '182',
        one: '31',
        two: '29',
        three: '31',
        four: '30',
        five: '30',
        six: '30'
      }
      this.tableData4.push(row)
    },
    getTableData5() {
      let row ={
        project: 'K',
        objInfo: '室间质评数据',
        sample1: '-0.91%',
        sample2: '-0.87%',
        sampleNum: 2,
        offset: '0.89%'
      }
      this.tableData5.push(row)
    },
    getTableData6() {
      let row = {
        CV:'1.45%',
        Bias: '0.89%',
        TE: '3.28%'
      }
      this.tableData6.push(row)
    },
    getTableDate7() {
      let row = {
        target: '6.0%',
        TEa: '6.0%',
        standard1: '1/3',
        CV: '2.00%',
        standard2: '1/2',
        Bias: '3.00%'
      }
      this.tableData7.push(row)
    },
    getTableDate8() {
      let row = {
        Sigma: '3.53',
        CV: '达标',
        Bias: '达标',
        TE: '达标'
      }
      this.tableData8.push(row)
    },
    handleClose() {
      this.$emit('close', false)
    },
    handleOpenHistory() {
      this.$router.push({path:"/report/components/history?title=历史质控统计报告"})
    }
  }
};
</script>
